<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文章列表百叶窗效果</title>
<style>
*{
	padding:0px;
	margin:0px;
}
ul{
	list-style: none;
}
#ul1, #ul2{
	width: 220px;
	height: auto;
	border-top: 1px solid #aaa;
	float: left;
	margin: 50px 0px 0 50px;
}
#ul1 li, #ul2 li{
	width: 100%;
	text-indent: 15px;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px dashed #ccc;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
#ul1 li div, #ul2 li div{
	position: absolute;
	left: 0px;
	top: -30px;
}
#ul1 li div p, #ul2 li div p{
	height: 30px;
	line-height: 30px;
}
</style>
<link rel="stylesheet" type="text/css" href="../../../css/article_base.css" />
<script type="text/javascript" src="../../../js/move.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>

<p class="title">DEMO演示 文章列表百叶窗效果 多层定时器嵌套</p>

<ul id="ul1">
	<li>
		<div>
			<p>11111111111111111111111</p>
			<p>22222222222222222222222</p>
		</div>
	</li>
	<li>
		<div>
			<p>33333333333333333333333</p>
			<p>44444444444444444444444</p>
		</div>
	</li>
	<li>
		<div>
			<p>55555555555555555555555</p>
			<p>66666666666666666666666</p>
		</div>
	</li>
	<li>
		<div>
			<p>77777777777777777777777</p>
			<p>88888888888888888888888</p>
		</div>
	</li>
	<li>
		<div>
			<p>99999999999999999999999</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
		</div>
	</li>
	<li>
		<div>
			<p>bbbbbbbbbbbbbbbbbbbbbbb</p>
			<p>ccccccccccccccccccccccc</p>
		</div>
	</li>
	<li>
		<div>
			<p>ddddddddddddddddddddddd</p>
			<p>eeeeeeeeeeeeeeeeeeeeeee</p>
		</div>
	</li>
</ul>
<ul id="ul2">
	<li>
		<div>
			<p>11111111111111111111111</p>
			<p>22222222222222222222222</p>
		</div>
	</li>
	<li>
		<div>
			<p>33333333333333333333333</p>
			<p>44444444444444444444444</p>
		</div>
	</li>
	<li>
		<div>
			<p>55555555555555555555555</p>
			<p>66666666666666666666666</p>
		</div>
	</li>
	<li>
		<div>
			<p>77777777777777777777777</p>
			<p>88888888888888888888888</p>
		</div>
	</li>
	<li>
		<div>
			<p>99999999999999999999999</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
		</div>
	</li>
	<li>
		<div>
			<p>bbbbbbbbbbbbbbbbbbbbbbb</p>
			<p>ccccccccccccccccccccccc</p>
		</div>
	</li>
	<li>
		<div>
			<p>ddddddddddddddddddddddd</p>
			<p>eeeeeeeeeeeeeeeeeeeeeee</p>
		</div>
	</li>
</ul>

<p class="title" style="clear:both;">js代码</p>
<pre>
//文章列表百叶窗效果
window.onload = function(){
	var oUl1 = document.getElementById('ul1');
	var oUl2 = document.getElementById('ul2');
	
	toShow(oUl1);
	setTimeout(function(){
		toShow(oUl2);
	}, 2000);

	//百叶窗效果 函数封装
	function toShow(obj){
		var aDiv = obj.getElementsByTagName('div');
		var iNow = 0;
		var Timer = null;
		var flag = true;
		var timer = null;

		//每4ms启动一次变化
		setInterval(function(){
			clearInterval(timer);
			//所有标题 间隔100ms依次运动
			timer = setInterval(function(){
				if(iNow == aDiv.length){
					clearInterval(timer);
					flag = !flag;			//每次所有标题变化完毕 变化flag iNow置0
					iNow = 0;
				}else if(flag){				//通过判断flag 决定是上翻还是下翻
					bufferMove(aDiv[iNow], {"top": "0px"});		//下翻
					iNow ++;
				}else{
					bufferMove(aDiv[iNow], {"top": "-30px"});	//上翻
					iNow ++;
				}			
			}, 100);
		}, 4000);	

	}
}


/* 缓冲运动
 * obj 运动对象
 * json 运动目标属性 如{"left":"800px","opacity":"0.5"} 
 * fn 回调函数
 */
function bufferMove(obj,json,fn){  
	var iCur = 0;
	var iTarget = 0;
	var iSpeed = 0;  
	var bStop = true;        
	clearInterval(obj.fMove);

	obj.fMove = setInterval(function(){
		bStop = true;                       	//每次定时器一开始 就设置bStop为ture
		
		for(attr in json){                  	//for in json 同时做n个属性的缓冲型数值变化
			if(attr == 'opacity'){   
				//对于opacity属性 传入0.x 然后放大100倍进行操作 后续赋值再除以100         
				iCur = parseInt(parseFloat(getStyle(obj,attr)) * 100);	
				iTarget = parseInt(parseFloat(json[attr]) * 100);		 
			}else{
				iCur = parseInt(getStyle(obj,attr)); 
				iTarget = parseInt(json[attr]);                       
			}
			iSpeed = (iTarget - iCur)/8;                                 
			
			if(iSpeed > 0){
				iSpeed = Math.ceil(iSpeed);
			}
			if(iSpeed < 0){
				iSpeed = Math.floor(iSpeed);
			}
			
			//每个定时器周期里 for in 循环了n次 有n个同时进行的bufferMove函数 从而变化属性值 
			//n个bufferMove函数里只要有任意一个函数里的属性值还没到达终点 都会把bStop变为false  
			//当所有属性值都到达终点后 也就是n个bufferMove函数都不执行这句的时候  
			//这次定时器周期最后的bStop没有被变化为false 还是true   
			//当这次定时器周期的bStop还是ture的话 在定时器周期函数最后判断bStop为ture 那就关闭定时器了                     	
			if(iTarget != iCur){   
				bStop = false;          	
			}                           	
                                          	
			if(attr == 'opacity'){                                       
				obj.style[attr] = (iCur + iSpeed)/100 + '';            
				obj.style.filter = 'alpha(opacity:'+(iCur+iSpeed)+')';  
			}else{
				obj.style[attr] = iCur + iSpeed + 'px';                
			}		
		}
		
		if(bStop){                     		//只要有任意一个还没到达终点 bStop会被变成false 不停止定时器
			clearInterval(obj.fMove);  		//当所有属性值都到达终点后 bStop不会变false 还是原来的true 停止定时器         
			if(fn){                                                    
				fn();                                                  
			}
		}
	},20);
}
</pre>

<p class="title">html代码</p>
<pre>
&ltul id="ul1">
	&ltli>
		&ltdiv>
			&ltp>11111111111111111111111&lt/p>
			&ltp>22222222222222222222222&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>33333333333333333333333&lt/p>
			&ltp>44444444444444444444444&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>55555555555555555555555&lt/p>
			&ltp>66666666666666666666666&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>77777777777777777777777&lt/p>
			&ltp>88888888888888888888888&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>99999999999999999999999&lt/p>
			&ltp>aaaaaaaaaaaaaaaaaaaaaaa&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>bbbbbbbbbbbbbbbbbbbbbbb&lt/p>
			&ltp>ccccccccccccccccccccccc&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>ddddddddddddddddddddddd&lt/p>
			&ltp>eeeeeeeeeeeeeeeeeeeeeee&lt/p>
		&lt/div>
	&lt/li>
&lt/ul>
&ltul id="ul2">
	&ltli>
		&ltdiv>
			&ltp>11111111111111111111111&lt/p>
			&ltp>22222222222222222222222&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>33333333333333333333333&lt/p>
			&ltp>44444444444444444444444&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>55555555555555555555555&lt/p>
			&ltp>66666666666666666666666&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>77777777777777777777777&lt/p>
			&ltp>88888888888888888888888&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>99999999999999999999999&lt/p>
			&ltp>aaaaaaaaaaaaaaaaaaaaaaa&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>bbbbbbbbbbbbbbbbbbbbbbb&lt/p>
			&ltp>ccccccccccccccccccccccc&lt/p>
		&lt/div>
	&lt/li>
	&ltli>
		&ltdiv>
			&ltp>ddddddddddddddddddddddd&lt/p>
			&ltp>eeeeeeeeeeeeeeeeeeeeeee&lt/p>
		&lt/div>
	&lt/li>
&lt/ul>
</pre>

<p class="title">css代码</p>
<pre>
*{
	padding:0px;
	margin:0px;
}
ul{
	list-style: none;
}
#ul1, #ul2{
	width: 220px;
	height: auto;
	border-top: 1px solid #aaa;
	float: left;
	margin: 50px 0px 0 50px;
}
#ul1 li, #ul2 li{
	width: 100%;
	text-indent: 15px;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px dashed #ccc;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
#ul1 li div, #ul2 li div{
	position: absolute;
	left: 0px;
	top: -30px;
}
#ul1 li div p, #ul2 li div p{
	height: 30px;
	line-height: 30px;
}
</pre>


</body>
</html>